<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>mouseover & mouseleave 차이</title>
    <style>
        .div1{ width: 45%; height: 500px; background: lightpink; padding-top: 5%; float: left; text-align: center;}
        .div2{ width: 70%; height: 60%; margin: auto; background: hotpink; padding-top: 12%;}
        .div3{ width: 70%; height: 60%; margin: auto; background: deeppink;}
        article{ width: 80%; height: 50%; margin: auto; background: orangered;}
        ul{ width: 50%; margin: auto; background: darkred;}
        li:nth-child(2n){ background: cadetblue;}
        li:nth-child(2n+1){ background: mediumslateblue;}

        .div1.mouseover { margin-right: 50px;}
        .div1.mouseenter {}
    </style>
    <script src="../jquery-latest.js"></script>
    <script>
        $(function(){
            var cnt1 = 0;
            $('.mouseover').mouseover(function(){
                $(this).find('span').text('mouseover : ' + ++cnt1);
            });
            var cnt2 = 0;
            $('.mouseenter').mouseenter(function(){
                $(this).find('span').text('mouseenter : ' + ++cnt2);
            });
        })
    </script>
</head>
<body>

<h1>mouseover & mouseenter 차이</h1>

<section>
    <div class="div1 mouseover">
        <div class="div2">
            <div class="div3">
                <article>
                    <ul>
                        <li>list1<b>kekeke</b></li>
                        <li>list2</li>
                        <li>list3</li>
                    </ul>
                </article>
            </div>
        </div>
        <span></span>
    </div>
    <div class="div1 mouseenter">
        <div class="div2">
            <div class="div3">
                <article>
                    <b>korea</b>
                </article>
            </div>
        </div>
        <span></span>
    </div>
</section>
</body>
</html>